<template>
  <img ref="authImg" />
</template>

<script setup name="AuthImage">
import { ref, onMounted, watch, defineProps } from 'vue'
import request from '@/utils/request'
import { fullFilePath } from '@/utils/tools'

// 接受的属性
const props = defineProps({
  imgUrl: String
})

const authImg = ref(null)

// 获取图片数据
const getImgUrl = () => {
  request({
    url: fullFilePath(props.imgUrl),
    method: 'get',
    responseType: 'blob'
  }).then((res) => {
    // 图片加载完成后，将 Blob 数据转换为对象 URL 并设置为 img 的 src
    const objectUrl = URL.createObjectURL(res)
    authImg.value.src = objectUrl

    // 图片加载完成后，撤销对象 URL，释放内存
    authImg.value.onload = () => {
      URL.revokeObjectURL(objectUrl) // 撤销 URL 对象
    }
  })
}

// 在组件挂载时获取图片
onMounted(getImgUrl)

// 监听 imgUrl 变化，更新图片
watch(
  () => props.imgUrl,
  () => {
    getImgUrl()
  }
)
</script>
